import { reactive } from 'vue'
import type { TableColumn } from './types'
import { calculateColumnWidths, calcFixedOffsets } from './distribute'

export interface ColumnState {
  widths: number[]
  leftOffsets: Record<string, number>
  rightOffsets: Record<string, number>
}

export function useColumnManager(columns: TableColumn[], initWidth: number) {
  const state = reactive<ColumnState>({
    widths: calculateColumnWidths(columns, initWidth),
    leftOffsets: {},
    rightOffsets: {}
  })

  function recalculate(width: number) {
    state.widths = calculateColumnWidths(columns, width)
    const { leftOffsets, rightOffsets } = calcFixedOffsets(state.widths, columns)
    state.leftOffsets = leftOffsets
    state.rightOffsets = rightOffsets
  }

  return { state, recalculate }
}
